<style lang="scss">
@import "./main.scss";
</style>
<template>
  <div class="f-column">
    <div class="main-header f-row">
      <div class="f-row f-full">
        <div class="main-title f-animate f-row"
             :style="{width:width+'px'}">
          <img class="app-logo"
               src="/favicon.ico">
          <span v-if="!collapsed">如梦技术</span>
        </div>
        <div class="main-bar f-full">
          <span class="main-toggle glyphicon glyphicon-align-justify"
                @click="toggle()"></span>
          <div class="right-bar">
            <Screenfull />
            <MenuButton text="admin"
                        :plain="true">
              <Menu>
                <MenuItem text="修改密码"
                          iconCls="glyphicon-pencil">
                </MenuItem>
                <MenuSep />
                <MenuItem text="退出"
                          iconCls="glyphicon-log-out">
                </MenuItem>
              </Menu>
            </MenuButton>
          </div>
        </div>
      </div>
    </div>
    <div class="f-row f-full">
      <div class="sidebar-body f-animate"
           :style="{width:width+'px'}">
        <div v-if="!collapsed"
             class="sidebar-user">
          菜单导航
        </div>
        <SideMenu :collapsed="collapsed"
                  :data="data"
                  :border="false"
                  @itemClick="handleMenuClick">
        </SideMenu>
      </div>
      <div class="main-body f-full">
        <Tabs :headerHeight="31"
              :plain="true"
              :scrollable="true"
              ref="tabs"
              @tabClose="tabClose"
              @tabSelect="handleTabSelect">
          <TabPanel title="首页"
                    iconCls="glyphicon-home"
                    style="backgroud:#fff">
          </TabPanel>
          <TabPanel v-for="tab in tabsList"
                    :key="tab.text"
                    :iconCls="tab.iconCls"
                    :title="tab.text"
                    :closable="true"
                    :selected="tab.selected">
          </TabPanel>
          <div slot="tools"
               class="tab-tool">
            <MenuButton text="标签选项"
                        :plain="true">
              <Menu :noline="true"
                    @itemClick="onItemClick($event)">
                <MenuItem text="关闭全部"
                          value="closeAll" />
                <MenuItem text="关闭其它"
                          value="closeOther" />
              </Menu>
            </MenuButton>
          </div>
        </Tabs>
        <div style="max-width:calc(100vw - 202px);max-height: calc(100vh - 83px)">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getMenu } from '_api/resource'
import Screenfull from '_c/Screenfull'
export default {
  components: {
    Screenfull
  },
  created () { this.getData() },
  data () {
    return {
      selection: null,
      isFullScreen: false,
      collapsed: false,
      width: 195,
      data: [],
      tabsList: []
    }
  },
  methods: {
    getData () {
      const _this = this
      getMenu().then(res => {
        _this.data = res
      })
    },
    handleMenuClick (item) {
      const _this = this
      let hasTab = false
      _this.tabsList.forEach((tab, index) => {
        if (tab.text === item.text) {
          _this.$refs.tabs.select(index + 1)
          hasTab = true
        }
      })
      if (!hasTab) {
        _this.tabsList.push(item)
        setTimeout(() => {
          _this.$refs.tabs.select(_this.tabsList.length)
        }, 100)
      }
      if (_this.$router.currentRoute.path !== item.attributes) {
        _this.$router.push(item.attributes)
      }
    },
    handleTabSelect (panel) {
      const selectTab = this.tabsList.filter(tab => {
        return tab.text === panel.title
      })
      if (selectTab.length) {
        if (this.$router.currentRoute.path !== selectTab[0].attributes) {
          this.$router.push(selectTab[0].attributes || '/')
        }
      } else {
        this.$router.push('/')
      }
    },
    toHome () {
      if (this.$router.currentRoute.name !== 'home') { this.$router.push({ name: 'home' }) }
    },
    refreshTab () {
      this.$nextTick(() => {
        this.$router.go(0)
      })
    },
    onItemClick (event) {
      if (event === 'closeAll') {
        this.closeAll()
      } else {
        this.closeOther()
      }
    },
    closeAll () {
      this.tabsList = []
      this.$router.push('/')
    },
    closeOther () {
      const _this = this
      const selectedPanel = _this.$refs.tabs.getSelectedPanel()
      if (selectedPanel && selectedPanel.title !== '首页') {
        _this.tabsList = _this.tabsList.filter(tab => {
          return tab.text === selectedPanel.title
        })
      } else {
        _this.closeAll()
      }
    },
    toggle () {
      this.collapsed = !this.collapsed
      this.width = this.collapsed ? 50 : 195
    },
    tabClose (panel) {
      const _this = this
      _this.tabsList = _this.tabsList.filter(tab => {
        return tab.text !== panel.title
      })
    }
  }
}
</script>
